<template>
	<view class="GasStation" :class="{'pof':loading}">
		<view class="search-top pof f-background box-sizing dis"
			:style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }"
			v-if="scrollTop>10 || oilShow">
			<text class="color0 size-30 font-weight-600">附近油站</text>
		</view>
		<u-skeleton rows="1" :title="false" :rowsWidth="['750rpx']" rowsHeight="378rpx" :loading="loading">
			<view class="station">
				<image class="width-height100" src="@/static/ks/lun.png" mode=""></image>
			</view>
		</u-skeleton>
		<!-- 油站列表 -->
		<view class="stations-left por">
			<view id="condition" class="condition dis-cen"
				:class="{'border-sta':scrollTop<=getSystemInfo.statusBarHeight/2}"
				:style="{top: `${getSystemInfo.statusBarHeight}rpx`}">
				<u-skeleton rows="1" :title="false" :rowsWidth="['160rpx']" :rowsHeight="['50rpx']" :loading="loading">
					<view class="font-weight-600 color0 size-32">附近油站</view>
				</u-skeleton>
				<view @click="onOilNumber">
					<u-skeleton rows="1" :title="false" :rowsWidth="['100rpx']" :rowsHeight="['50rpx']"
						:loading="loading">
						<view class="dis-ali">
							<text class="font-weight-600 color3 size-34">{{screenList[screenIndex]}}</text>
							<text class="iconfont icon-xiala size-40"></text>
						</view>
					</u-skeleton>
				</view>
			</view>
			<view class="station-backs poa"></view>
			<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
				@up="$event=> postPageStations($event.num)" :toTop="{width: '100px',height: '100px'}"
				:down="{auto: false}" :up="{auto: false,page:{num:1}, textNoMore: '-已经到底啦-',empty:{use:false}}">
				<view class="gas-for por" :class="{'stations-for background-fe':index == 0&&!loading}"
					v-for="(item,index) in loading ? 10 : list" :key="index">
					<view class="standard dis-cen" v-if="index == 0">
						<!-- <image class="gas-icon" src="@/static/icons/jrtj.png" mode="widthFix"></image> -->
						<view class="color-f size-24 dis-ali" v-if="!loading">
							今日国标油价：<text class="size-28 font-weight-600">
								{{item.oilCode || '92#'}} {{item.countryPrice || 0}}
							</text>
						</view>
					</view>
					<view class="por">
						<navigator hover-class="none"
							:url="`/packageGas/gas-details/gas-details?stationsId=${item.stationsId}&code=${screenList[screenIndex]}`"
							class="gas-name f-background por" :class="{'station-boxs':loading}">
							<u-skeleton rows="4" :title="false" :rowsWidth="['252rpx','476rpx','344rpx','368rpx']"
								:rowsHeight="['32rpx','24rpx','60rpx','40rpx']" :loading="loading">
								<view class="color2 font-weight-600 size-36 margin-bottom-16">
									{{item.stationsName || '-'}}
								</view>
								<view class="color2 font-weight-400 size-24">{{item.location || '-'}}</view>
								<view class="station-prices font-weight-600">
									<text class="first color size-50">{{item.discountPrice || 0}}</text>
									<text class="color2 size-26">元</text>
									<text class="yzj size-24">油站价 {{item.stationPrice || 0}}元</text>
								</view>
								<view class="preferential dis-ali">
									<view class="preferential-for font-weight-600 size-24 dis"
										v-for="(items,indx) in item.discounts" :key="indx" v-if="indx<=1">
										满{{items.amount || 0}}元减{{items.discount || 0}}元</view>
								</view>
							</u-skeleton>
						</navigator>
						<view class="navigation dis radius100 poa" @click="onNavigationGo(item)" v-if="!loading">
							<!-- <image class="nav-icon" src="@/static/icons/dh.png" mode=""></image> -->
							<text class="font-weight-600 color3 size-24">{{item.distance || 0}}km</text>
						</view>

					</view>
				</view>
				<view v-if="!list.length && !loading">
					<Default tisName="暂无油站数据！" />
				</view>
			</mescroll-body>
		</view>
		<!-- 油号 -->
		<u-popup :show="oilShow" :round="16" mode="top" @close="oilShow=false">
			<view class="search-oil">
				<view class="search-top box-sizing dis" :style="{ height: `${getSystemInfo.statusBarHeight}rpx` }">
				</view>
				<view class="condition dis-cen">
					<view class="font-weight-600 color0 size-32">附近油站</view>
					<view class="dis-ali" @click="onOilNumber">
						<text class="font-weight-600 color3 size-34">{{screenList[screenIndex]}}</text>
						<text class="iconfont icon-xiala size-40"></text>
					</view>
				</view>
				<view class="oil-screen">
					<view class="screen-title dis" :class="{'border backgrounds':screenList[screenIndex] == item}"
						v-for="(item,index) in screenList" :key="index" @click="onSelectNumber(index)">
						<text class="font-weight-600 color2 size-34">{{item}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { getSystemInfo } from '@/utils/index';
	import Default from "@/components/default/default"
	import { GetOilCode, PageStations } from "@/api/index"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { Default },
		data() {
			return {
				loading: true,
				// doNotSlide: false,
				screenList: [], // 油号列表
				screenIndex: 0,
				oilShow: false,
				list: [],
				scrollTop: 0,
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				getPositionTop: 0,
				getPositionHighe: 0,
				params: {
					size: 20, // 	每页显示条数
					current: 1, // 当前页
					dataBean: {
						longitude: 0,
						latitude: 0,
						code: 0

					}
				}
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
			uni.setNavigationBarColor({
				frontColor: this.scrollTop > 10 ? '#000000' : '#ffffff', // 白色字体
				backgroundColor: '#ffffff', // 黑色背景
				animation: { duration: 0, timingFunc: 'easeIn' }
			})
		},
		async onLoad() {
			await this.postGetOilCode() // 获取油号
			await this.postPageStations() // 列表
			// await this. // 获取列表
			await this.getPosition() // 获取位置
		},
		methods: {
			// 获取油号
			async postGetOilCode() {
				const { data, code } = await GetOilCode()
				if (code == '200') {
					this.screenList = data
				}
			},
			// 列表数据
			async postPageStations(page) {
				// this.loading = true
				// this.pageUp.num = page || 1
				this.params.dataBean = uni.getStorageSync('location')
				this.params.dataBean.code = this.screenList[this.screenIndex]
				this.params.current = this.mescroll.num
				const { code, data } = await PageStations(this.params)
				const _this = this
				if (code == "200") {
					console.log('data', data)
					this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data.records); //追加新数据
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			// 点击选择油号弹窗
			onOilNumber() {
				console.log(' this.getSystemInfo.screenHeightpx', this.getSystemInfo.screenHeightPx)
				let _this = this
				uni.pageScrollTo({
					scrollTop: this.getPositionTop,
					duration: 300
				});
				// setTimeout(() => {
				// 	_this.doNotSlide = true
				// }, 300)
				this.oilShow = true
			},
			// 点击选择油号
			onSelectNumber(index) {
				this.screenIndex = index
				this.oilShow = false
				this.mescroll.resetUpScroll()
			},
			// 获取位置
			getPosition() {
				const _this = this
				const query = uni.createSelectorQuery().in(this); // 指定在当前组件下查询  
				query.select('#condition').boundingClientRect(data => {
					console.log('位置信息：', data);
					_this.getPositionTop = data.top - data.height - 30
					_this.getPositionHighe = data.height
				}).exec();
			},
			// 导航前往
			onNavigationGo(res) {
				uni.openLocation({
					latitude: res.latitude,
					longitude: res.longitude,
					name: res.stationsName,
					address: res.location,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.GasStation {
		width: 100%;
		box-sizing: border-box;
		left: 0;
		top: 0;

		.search-top {
			z-index: 10077;
			top: 0;
			left: 0;
			width: 100%;
		}

		.station-boxs {
			box-shadow: 0 0 10rpx rgba(254, 64, 62, 0.05);
		}

		.station {
			width: 750rpx;
			height: 378rpx;
		}

		.condition {
			padding: 0 26rpx 0 30rpx;
			height: 90rpx;
			position: sticky;
			background: #fff;
			width: 100vw;
			z-index: 20;
			// z-index: 10076;
			margin-left: -16rpx;
			box-sizing: border-box;

			.icon-xiala {
				margin-left: 8rpx;
				color: #A8A8A8;
			}
		}

		.border-sta {
			border-radius: 24rpx 24rpx 0 0;
		}

		.stations-left {
			margin-top: -44rpx;
			border-radius: 24rpx 24rpx 0 0;
			padding: 0 16rpx;

			.station-backs {
				width: 100vw;
				height: 340rpx;
				left: 0;
				top: 0;
				border-radius: 24rpx 24rpx 0 0;
				background: linear-gradient(180deg, #FFFFFF 38%, rgba(255, 255, 255, 0) 100%);
			}

			.stations-for {
				padding: 0 4rpx 4rpx;
			}

			.background-fe {
				background: linear-gradient(92deg, #FE403E 0%, #FF7B00 100%);
			}

			.gas-for {
				border-radius: 24rpx;
				margin-bottom: 20rpx;

				.standard {
					padding: 14rpx 24rpx 12rpx 28rpx;
				}

				.gas-icon {
					width: 144.27rpx;
					height: 35.48rpx;
				}

				.gas-name {
					border-radius: 24rpx;
					padding: 40rpx 30rpx 32rpx 30rpx;

					.station-prices {
						margin-top: 28rpx;
					}

					.preferential {
						.preferential-for {
							margin-right: 20rpx;
							height: 40rpx;
							border-radius: 10rpx;
							border: 2px solid #FF5555;
							color: #FF5555;
							padding: 0 8rpx;
							margin-top: 28rpx;
						}
					}
				}

				.navigation {
					padding: 13rpx 14rpx;
					background: #FFEDED;
					right: 20rpx;
					top: 28rpx;

					.nav-icon {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		// 油号
		.search-oil {
			.oil-screen {
				flex: 1;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: 76rpx 76rpx;
				// grid-gap: 16rpx 16rpx;
				gap: 16rpx;
				padding: 0 32rpx;

				.screen-title {
					background: #F0F0F0;
					border-radius: 8rpx;
					border: 1px solid #F0F0F0;
				}
			}

			.condition {
				margin-left: 0;
			}
		}

	}
</style>